<extend name="Base/common"/>
<block name="style">
    
<style type="text/css">
	.head{
		width:100%;
		height:100%;
		padding-top: 0px;
	}
    form{
        width:90%;
        margin-left: 5%;
        margin-top:3%;

    }


    .tips{
        position:fixed;
        top:-10px;
        background: rgba(41,81,196,0.5);
        width:100%;
        color:#fff;
        font-size:16px;
        text-align: left;
        text-indent: 2em;
        line-height:45px;
        z-index: 99;
    }

    .mianzhi{
        float: left;
        width:70px;
        height:30px;
        border-radius: 5px;
        background: #FA803B;
        color: #fff;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        margin-left:4%;
    }
    .cur{
        background: red;
    }

    .viewblock{
        width:100%;
        float:left;
        margin-top:5%;
    }
    .viewblock p{
        float: left;
        font-size: 12px;
        line-height: 30px;
        padding-bottom:5%;
    }
    .viewblock input{
        height:30px;
        border-style: solid;
        border-top-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 1px;
        border-left-width: 0px;
        color: #ccc;
        font-size: 12px;
        
    }
      .tips{
        position:fixed;
        background: rgba(0,133,208,0.5);
        width:100%;
        color:#fff;
        font-size:16px;
        text-align: left;
        text-indent: 2em;
        line-height:30px;
        margin-top:9px;
        z-index: 99;
        display: none;
    }


</style>

</block>
<block name="body">
    <p class="tips"></p>

	<div class="head">
        <div style="height:30px;line-height:30px;background:#e5e2e2"><a onclick="history.go(-1)" style="color:#000">返回控制中心</a></div>
        <form method="post" action="">
            <div class="viewblock" >
                <p>选择面值：</p>
                <ul>
                    <li class="mianzhi cur">
                        <label>
                            <input type="radio" name="type" value="100" checked style="display:none">
                            100
                        </label>
                        
                    </li>
                    <li class="mianzhi">
                        <label>
                            <input type="radio" name="type" value="500" style="display:none">
                            500
                        </label>
                        
                    </li>
                    <li class="mianzhi" style="margin-right:0">
                        <label>
                            <input type="radio" name="type" value="1000" style="display:none">
                            1000
                        </label>
                        
                    </li>
                </ul>
            </div>
            <div class="viewblock">
                <p>输入卡号：</p>
                <input type="text" name="number" value="" style="width:80%">
            </div>
            <div class="viewblock">
                <p>输入密码：</p>
                <input type="text" name="password" value="" style="width:80%">
            </div>
                 <input type="button" class="login-btn"  style="height:35px;" value="提 交">
        </form>

        <div style="padding:0 5%;color:#0085d0;font-size:12px;margin-top:5%">
            <p>温馨提示：</p>
            <p>1.目前仅支持中国石化卡号卡密方式回收</p>
            <p>2.请精准填写所供卡号与密码相对应且真实有效，否则可能导致无法结算，给您带来损失</p>
            <p>3.中石化加油卡卡号16位卡密20位，请精确填写卡号卡密，以免提交失败</p>
            <p>4.仅支持100/500/1000三个面值回收，回收折扣为98折，一旦核销无法撤回</p>
            <p>5.请勿在多平台提交和多次提交核销，否则会核销失败</p>
        </div>
	</div>
<style type="text/css">

    .bottom li span{
        float: left;
        font-size: 12px;
        width:100%;
        height:40px;
        margin-top:4px;
        color: #ccc;
        text-align: center;

    }
</style>

</block>



<block name="script">
<script type="text/javascript">
    $('ul li').click(function(){
        $("ul li").eq($(this).index()).addClass("cur")
        $("ul li").eq($(this).index()).siblings().removeClass("cur");
    })

    $('.login-btn').click(function(){
        var data=$('form').serializeArray();
        $.ajax({
            type:'post',
            url:'',
            data:data,
            async:false,
            success:function(m){

                if(m>1){
                    $('.tips').html('提交成功，请耐心等候核销')
                    $('.tips').show()
                    setTimeout(function(){
                        $('.tips').hide()
                        
                    },3000)
                }else{
                    $('.tips').html(m)
                    $('.tips').show()
                    setTimeout(function(){
                        $('.tips').hide()
                        
                    },3000)
                }
                
                // $.ajax({
                //     type:'post',
                //     url:'http://ip:port/userApi/supply/gateway',
                //     data:m,
                //     async:false,
                //     success:function(m){
                //         alert(m)
                //     }
                // })
            }
        })
    })
</script>

</block>